<h5 class="section-heading">
    Detail
    <info-popover mode="right-normal"><span ng-bind-html="$GF.popover('Definition of event mapping', 'EVENTS')"></span>
    </info-popover>
</h5>
<!-- WHAT/PATTERN -->
<div class="gf-form">
    <label class="gf-form-label width-10">
        What
        <info-popover mode="right-normal">
            <span ng-bind-html="$GF.popover('Enter shape Id or click on target button', 'EVENTS')">
            </span>
        </info-popover>
    </label>
    <input type="text" style="margin-right: 2px;" id="{{ elt.uid }}" placeholder="id or regex of shape"
        class="gf-form-input width-8" ng-model="elt.pattern" ng-model-onblur
        title="Enter an id, label,metadata attribute or regex to identify object"
        bs-typeahead="rule.getEventMapOptions().identByProp !== 'metadata' ? editor.getCellNamesTypeHead : editor.getCellNamesMD" data-min-length="0" data-items="100"
        data-placement="right" />
    <button class="btn btn-secondary btn-small" style="margin-left:2px; height: 32px;"
        ng-show="rule.getEventMapOptions().identByProp !== 'metadata'"
        title="Select an object in diagram/graph" ng-click="elt.enableMapping(true)">
        <div Class="gf-icon-target" style="margin-bottom: 7px;margin-right: 2px;"></div>
    </button>
    <button class="btn btn-secondary btn-small" style="margin-left:5px; height: 32px;" title="Identify selected objects"
        ng-mousedown="editor.highlightXCells(elt)" ng-mouseup="editor.unhighlightXCells(elt)" ng-mouseleave="editor.unhighlightXCells(elt)">
        <div Class="gf-icon-location" style="margin-bottom: 7px;margin-right: 2px;"></div>
    </button>
</div>
<div class="gf-form">
    <label class="gf-form-label width-10" style="margin-right: 2px;">When current level is
        <info-popover mode="right-normal">
            <span ng-bind-html="$GF.popover('Select a comparison operator', 'EVENTS')">
            </span>
        </info-popover>
    </label>
    <select class="gf-form-input width-10" ng-model="elt.comparator" ng-attr-id="{{elt.uid + '-' + CN3}}"
        ng-attr-title="{{$GF.GetT4V( editor.comparator, elt.comparator)}}"
        ng-options="c.value as c.text for c in editor.comparator">
    </select>
</div>
<div class="gf-form">
    <label class="gf-form-label width-10" style="margin-right: 2px;">Than Level
        <info-popover mode="right-normal">
            <span ng-bind-html="$GF.popover('Select a level', 'EVENTS')">
            </span>
        </info-popover>
    </label>
    <select convert-to-number class="gf-form-input width-10" ng-model="elt.level">
        <option type="number" ng-repeat="color in rule.getThresholds()" ng-value="$index">{{$index}}</option>
    </select>
</div>
<div class="gf-form">
    <label class="gf-form-label width-10" style="margin-right: 2px;">Then execute
        <info-popover mode="right-normal">
            <span ng-bind-html="$GF.popover('Select action type', 'EVENTS')">
            </span>
        </info-popover>
    </label>
    <select class="gf-form-input width-10" ng-model="elt.animation" style="width:100%;"
        ng-attr-id="{{elt.uid + '-' + CN5}}"
        ng-attr-title="{{$GF.GetT4V( editor.EventType, elt.animation)}}"
        ng-options="c.value as c.text for c in editor.EventType">
    </select>
</div>
<div class="gf-form">
    <label class="gf-form-label width-10" style="margin-right: 2px;">With parameter
        <info-popover mode="right-normal">
            <span ng-bind-html="$GF.popover('Select a value', 'EVENTS')">
            </span>
        </info-popover>
    </label>
    <input type="text" style="margin-right: 2px;" placeholder="{{elt.getPlaceHolder()}}"
        class="gf-form-input width-10" ng-model="elt.value" title="Specify value for this action"
        bs-typeahead="editor.getEventValues" data-min-length="0" data-items="100" ng-focus="editor.onEventValue(elt)"
        data-min-length="0" data-items="100" ng-model-onblur data-placement="right" />
</div>
